<template>
    <a-modal
        style="text-align:center"
        :destroyOnClose='true'
        :footer="null"
        :visible="uploadModal"
        :title="title"
        @cancel="$emit('cancel')"
        >
            <div class="upload">
                <p><a-icon type="exclamation-circle" />上传前请先下载模板，按照模板要求将内容录入到模板中</p>
                <img src="../../assets/load_exer.png" alt="">
                <p>支持格式：xls、xlsx</p>
                <download 
                    :name="'下载模板'"
                    :api="api"
                    :methods="methods"
                    :fileName="fileName"
                    :isPrimary="false"
                ></download>
                <br>
                <a-upload
                    :fileList="fileList"
                    :remove="handleRemove"
                    :beforeUpload="beforeUpload"
                    accept='.xls,.xlsx'
                    >
                    <a-button style='margin-top:20px;'>
                        <a-icon type="upload" /> 选择文件
                    </a-button>
                </a-upload>
                    <a-button
                    type="primary"
                    @click="handleUpload"
                    :disabled="fileList.length === 0"
                    :loading="uploading"
                    style="margin-top: 16px"
                    >
                    {{uploading ? '上传中' : '开始上传' }}
                    </a-button>
            </div>
    </a-modal>
</template>
<script>
import axios from 'axios'
import download from "@/components/common/download"
export default {
    name:'downloadAndUpload',
    props:{
        uploadModal:Boolean,
        title:String,
        api:String,
        fileName:String,
        uploadData:Object,
        uploadApi:String,
        methods:{
            type:String,
            default:'get'
        }
    },
    components:{download},
    data(){
        return{
            fileList:[],
            uploading:false
        }
    },
    methods:{
        handleRemove(file) {
            const index = this.fileList.indexOf(file);
            const newFileList = this.fileList.slice();
            newFileList.splice(index, 1);
            this.fileList = newFileList
        },
        beforeUpload(file) {
            this.fileList = [file]
            return false;
        },
        handleUpload() {
            const { fileList } = this;
            const formData = new FormData();
            formData.append(this.uploadData.name, this.uploadData.value);
            fileList.forEach((file) => {
                formData.append('file', file);
            });
            this.uploading = true
            axios.post(window.g.apiUrl+this.uploadApi,formData).then(res=>{
                this.fileList = []
                this.uploading = false
                if(res.data.code==200){
                    this.$message.success(res.data.message);
                }else{
                    this.$message.error(res.data.message);
                }
                this.$emit('uploadCallback',res.data)
            }).catch(()=>{
                this.uploading = false
                this.$message.error('上传失败');
            });
        },
    }
}
</script>